React Helmet
使い方自体はそんなに難しくない。というかシンプル。
それよりも、ヘッダータグとして何を置くか見たいな方が重要。Reactというよりは、Web？の世界の話かも。
インストール
2023/5/11現在、react-helmet-asyncをインストールした方が良いらしい。
$ yarn add react-helmet-async @types/react-helmet-async
使い方
1. HelpmetProviderで全体を囲む
2. 指定コンポーネントにHelmetタグを置く
3. Helmetタグの中に、おなじみのヘッダータグ（titleなど）を置く
設定しておくのが無難なタグ
<title>
まあこれは言わなくてもわかるやつ。ページのタイトル。
Reactだと、ページは動的生成なので、そのページ遷移に合わせてページタイトルも変えてあげたい。 <meta name="description">
ページの説明を設定するタグ。
この説明が、Google検索の結果に表示される要約になるらしい。
<meta name="keywords">
ページのキーワードを設定するタグ。
最近だとGoogleアルゴリズムの進化で設定しなくてもいいらしい。
じゃあ無視でいいやんonigiri.w2.icon
<meta name="viewport">
これはレスポンシブにする場合に絶対に設定しておいた方がいいやつ。
まあ以下の設定になるな。
code: html
<meta name="viewport" content="width=device-width, initial-scale=1" />
おなじみのやつ。
注意.icon ただ、これはHelmetで設定するよりは、普通にindex.htmlに記載しておくのがいいと思う。
全ページで共通の設定なので。
あとはOGP系のタグ
SPAアプリなら設定しても意味ないけど、SSRやSSGは設定する必要あり。
Next.jsなら設定しな。
運用（現状）
今んとこ考えれる運用としては以下。
1. index.htmlの<meta name="descriptiono"/>には、data-rh="true"を指定しておく必要あり。
これがないと、React Helmetから上書きできない。
<meat name="description" content="hogehoge" data-rh="true" />
2. React Helmetはcomponents/laytout/Heatとして定義し、レイアウトに配置しておく
code: HEAD.tsx
export const Head = ({ title = "fire", description = "" }: Props = {}) => {
return (
<Helmet
title={title ? ${title} | ${SITENAME} : undefined}
defaultTitle={SITENAME}
<meta name="description" content="apple" />
</Helmet>
);
};
基本的には、各pageにこのHelmetを使わせるイメージ。
3. ただ、各ページで個別にtitleやdescriptionを設定したいなら、そのページ専用のHelmetを使う。
layoutのヘルメットよりも子コンポーネントでHelmetを定義したらデータ内容を上書きできる性質を使う。